<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>播放列表</title>
	<style type="text/css">
		* 
		{
		 padding: 0;
		  margin: 0; 

		}
		li 
		{ 
			list-style: none;
		}
		body 
		{
			background: #f6f9fc;
		}

		.down_list
		{ 
			width: 200px;
			/*使用滚动条来显示元素内溢出的内容*/
			overflow: hidden; 
			border: 1px solid #aab4bc; 
			background: url(images/down_list_h2_bg.gif) repeat-x; 
			margin: 50px auto 0; 
		}
		.down_list h2 
		{ 
			height: 25px; 
			line-height: 25px; 
			border: 1px solid #dee3e6; 
			border-top: 1px solid #f3f5f7; 
			padding-left: 10px; 
			font-size: 14px; 
			font-weight: normal; color: #57646e; 
			cursor: pointer; 
		}
		.down 
		{ 
			background: url(images/down.gif) no-repeat 180px center; 
		}
		.up 
		{ 
			background: url(images/up.gif) no-repeat 180px center; 
		}
		.down_list ul 
		{ 
			width: 200px; 
			overflow: hidden; 
			background: #e9edf2; 
			font-size: 12px; 
		}
		.down_list li 
		{ 
			width: 200px; 
			float: left; 
		}
		.down_list a 
		{ 
			display: block; 
			line-height: 25px; 
			padding-left: 10px; 
			color: #6b7980; 
			text-decoration: none; 
		}
		.down_list a:hover 
		{ 
			background: #fff; 
			text-decoration: underline; 
		}
	</style>
</head>
<body>
	<div id="drop" class="down_list">
	    <h2 class="up">播放列表</h2>
	    <ul>
	        <li><a href="#">玩爱之徒 - 蔡依林</a></li>
	        <li><a href="#">原谅我就是这样的女生 - 戴佩妮</a></li>
	        <li><a href="#">猜不透 - 丁当</a></li>
	        <li><a href="#">自导自演 - 周杰伦</a></li>
	        <li><a href="#">浪漫窝 - 弦子</a></li>
	        <li><a href="#">流年 - 王非</a></li>
	    </ul>
	    <script type="text/javascript">
	    	window.onload=function ()
			{
				var oDiv=document.getElementById('drop');
				var oH2=oDiv.getElementsByTagName('h2')[0];
				var oUl=oDiv.getElementsByTagName('ul')[0];
				
				oH2.onclick=showHideUl;
			}

			function showHideUl()
			{
				var oDiv=document.getElementById('drop');
				var oUl=oDiv.getElementsByTagName('ul')[0];
				var oH2=oDiv.getElementsByTagName('h2')[0];
				
				if(oUl.style.display === 'none')
				{
					oUl.style.display='block';
					oH2.className='up';
				}
				else
				{
					oUl.style.display='none';
					oH2.className='down';
				}
			}

	    </script>
    </div>
</body>
</html>